<template>
  <a-card :bordered="false">
    <title-name :title="title" />
    <UploadList
      v-if="disabled"
      :business-code="'LCM08'"
      class="mb20"
      text="上传"
      upload-type="normal"
      btn-type="primary"
      :upload-arrys.sync="files"
    />
    <!-- 表格 -->
    <s-table
      ref="table"
      table-layout="fixed"
      size="default"
      row-key="id"
      :columns="columns"
      :data="loadData"
      :alert="true"
      show-size-changer
      show-quick-jumper
      :show-pagination="false"
    >
      <template
        slot="action"
        slot-scope="text, record, index"
      >
        <div class="pub-table-list-action">
          <span>
            <a
              :href="'/api/ycloud-file-center/oper/download?access_token=' + token + '&fileId=' + record.fileId"
            >导出</a>
          </span>
          <span>
            <a
              href="javascript:"
              @click="$filePreview(record)"
            >查看</a>
          </span>
          <span>
            <a-popconfirm
              v-if="disabled"
              title="确定要删除?"
              @confirm="() => handleDel(index)"
            >
              <a>删除</a>
            </a-popconfirm>
          </span>
        </div>
      </template>
    </s-table>
  </a-card>
</template>
<script>
import { STable } from '@/components' // 表格
import Vue from 'vue'
import UploadList from '@/components/UploadList'

const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'index',
    customRender() {
      return arguments[2] + 1
    }
  },
  {
    title: '附件名称',
    dataIndex: 'fileName'
  },
  {
    title: '附件格式',
    ellipsis: true,
    dataIndex: 'suffixName'
  },
  {
    title: '操作',
    ellipsis: true,
    width: '10%',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    STable,
    UploadList
  },
  props: {
    attachment: {
      type: Array,
      default() {
        return []
      }
    },
    //查看禁用
    disabled: {
      type: Boolean,
      default() {
        return true
      }
    },
    title: {
      type: String,
      default() {
        return '附件'
      }
    }
  },
  watch: {
    attachment(val) {
      this.$nextTick(() => {
        this.files = this.attachment
        this.$refs.table.refresh(true)
      })
    },
    files(val) {
      this.$nextTick(() => {
        this.$emit('change', this.files)
        this.$refs.table.refresh(true)
      })
    }
  },
  data() {
    this.columns = columns

    this.token = Vue.getAcloudProvider().getAccessToken()
    return {
      files: [],
      loadData: () => {
        return new Promise((resolve, reject) => {
          resolve({
            data: this.files
          })
        })
      }
    }
  },
  methods: {
    handleDel(index) {
      this.attachment.splice(index, 1)
      this.$noticeSuccess('删除成功')
      this.$refs.table.refresh(true)
      this.$emit('change', this.files)
    }
  }
}
</script>
